<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta name="cloudcaptive" content=
"CloudCaptive.com UserInfuser">
<script type="text/javascript" src="/_ah/channel/jsapi">
</script>

<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"
type="text/javascript">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript">
</script>
<title></title>
</head>
<body>
<script type="text/javascript">
  window.onload = function(){
     $('#container').hide();

	  var channel = new goog.appengine.Channel('{{ token }}');
	  var socket = channel.open();
	  var queue = [];
	  var hide_callback = function(){
	    setTimeout(function(){hide_notification();}, showTime);
	  };
	  var hideTime = 4000;
	  var showTime = 2000;
	  var entryTime = 2000;
	  var bufferTime = 2000;
	  var checkMessageOn = false;
	  var totalNotifyTime = hideTime + showTime + entryTime + bufferTime;
	  function hide_notification()
	  {
	    $("#container").hide("{{exitEffect}}", {direction : "vertical"}, hideTime);
	  }
	  var hide_callback = function(){
	    setTimeout(function(){hide_notification();}, showTime);
	  };
	  function popMessage()
	  {
	    if (queue.length <= 0){
	      return;
	    }
	    m = queue.shift();
	    var newState = JSON.parse(m.data);

	    $("#title").html(newState.title);
	    $("#image").html("<img  style='display: block; margin-left: auto;   margin-right: auto;' height={{imageSize}} width={{imageSize}} src='" + newState.image + "'>");
	    $("#note").html(newState.note);
	    $("#container").show("{{entryEffect}}", {}, entryTime, hide_callback);
	  }
	  var onOpened = function(){};
	  var onMessage = function(m)
	  {
	    queue.push(m);
	    if (!checkMessageOn){
	      popMessage();
	      checkMessageOn = true;
	      /* keep checking periodically */
	      setInterval(function(){popMessage();}, totalNotifyTime);
	    }
	  };
	  var onError = function()
	  {
	    channel = new goog.appengine.Channel('{{ token }}');
	    socket = channel.open();
	  };
	  var onClose = function(){
	    channel = new goog.appengine.Channel('{{ token }}');
	    socket = channel.open();
	  };
	  socket.onopen = onOpened;
	  socket.onmessage = onMessage;
	  socket.onerror = onError;
	  socket.onclose = onClose;
  };

</script>
<div id="container" style=
"display:none; 
{% if hasRoundedCorners %}
border-radius: 10px 10px 10px 10px;
{% endif %}
overflow:hidden; height={{height}}px; widget={{width}}px;">
<div style=
"overflow:hidden; background-color:{{backgroundColor}}; visibility: visible; border:{{borderThickness}}px {{borderStyle}} {{borderColor}}; height:{{height}}px; width:{{width}}px; overflow:auto;">
{% if displayTitle %}
<div id="title" style=
"overflow:hidden; background-color:{{titleBackgroundColor}}; font-family:{{titleFont}}; font-size:{{titleSize}}px; text-align:{{titleFloat}}; color:{{titleColor}}; padding:3px;">
{{ title }}</div>
{% endif %}
<div id="image"></div>
<div id="note" style=
"overflow:hidden; font-family:{{noteFont}}; font-size:{{noteSize}}px; text-align:{{noteFloat}}; color:{{noteColor}}; padding:3px;">
</div>
</div>
</div>
</body>
</html>
